<template>
  <div class="binding">
    <nav-top title="绑定手机" :goback="true"></nav-top>
    <div class="form">
      <van-field
        class="input input-tel"
        v-model="phone"
        label-width="7rem"
        type="tel"
        placeholder="请输入手机号"
      >
        <div slot="label">
          <span class="input-label">手机号码</span>
          <div class="phone-code" slot="label" @click="showPicker = true">
          {{ phoneCode }}
          <van-icon class="phone-code-icon" size="0.6rem" color="#999" name="arrow-down" />
        </div>
        </div>
      </van-field>

      <van-field class="input" v-model="code" label-width="75" placeholder="请输入验证码">
        <span class="input-label" slot="label">验证码</span>
        <van-button class="send-code" slot="button" size="small" type="primary">获取验证码</van-button>
      </van-field>
      <van-button class="submit" type="primary" size="large">提交</van-button>
    </div>

    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="phoneCodes"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import NavTop from "@/components/nav/navBar";

export default {
  components: {
    NavTop
  },
  name: "Binding",
  data() {
    return {
      phoneCodes: ["+86", "+852"],
      showPicker: false,
      phoneCode: "+86",
      phone: "",
      code: ""
    };
  },
  methods: {
    onConfirm(value) {
      this.phoneCode = value;
      this.showPicker = false;
    }
  }
};
</script>
<style lang='scss' scoped>
.binding {
  height: 690px;
  .form {
    position: relative;
    top: 56px;
    padding-left: 21px;
    padding-right: 21px;
    .input {
      position: relative;
      padding: 0px;
      padding-top: 15px;
      padding-bottom: 11px;
      border-bottom: 1px solid #ececec;
      font-size: 13px;
      line-height: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      .input-label {
        font-size: 13px;
        line-height: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(86, 86, 86, 1);
      }
      ::-webkit-input-placeholder {
        color: rgba(214, 214, 214, 1);
      }
      .send-code {
        height: 16px;
        line-height: 1px;
        font-size: 12px;
        background: #fff;
        color: #4d39c6;
        border: none;
      }
    }
    .input-tel {
      position: relative;
      .phone-code {
        position:absolute;
        top: 15px;
        left: 55px;
        padding-left: 20px;
        font-size: 13px;
        padding-right: 10px;
        .phone-code-icon {
          position: absolute;
          top: 5px;
          left: 5px;
        }
      }
    }
    .submit {
      margin-top: 108px;
      height: 44px;
      font-size: 15px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 1px;
      background-color: #06a44f;
      border-color: #06a44f;
      border-radius: 2px;
    }
  }
}
</style>
